<script lang="ts" setup>
const props = withDefaults(defineProps<{
  value: {
    name: string
    position: string
    dataTimeRange: [Date, Date]
  }
  readonly: boolean
}>(), {
  readonly: false,
})
const emits = defineEmits<{
  <T extends keyof typeof formModel>(e: 'change', name: T, value: (typeof formModel)[T]): void
}>()

const formModel = props.value
</script>

<template>
  <el-form :model="formModel" label-width="100" label-position="left">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="标题">
          <el-input
            :model-value="formModel.name" placeholder="请输入会议标题"
            clearable
            :disabled="props.readonly"
            @input="(value) => emits('change', 'name', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="地点">
          <el-input
            :disabled="props.readonly"
            :model-value="formModel.position" placeholder="请输入会议地址" clearable
            @input="(value) => emits('change', 'position', value)"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="会议持续时间">
          <el-date-picker
            v-model="formModel.dataTimeRange"
            type="datetimerange"
            range-separator="To"
            start-placeholder="Start date"
            end-placeholder="End date"
            style="width: 100%;"
            :disabled="props.readonly"
            @change="(val: any) => emits('change', 'dataTimeRange', val)"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
